<style lang="less" scoped>
.info {
  width: 100%;
  height: 13.86rem;
  // background: url("~assets/alert-bg.png");
  background-color: #1980ff;
  background-position: top;
  background-size: 100% 100%;
  color: #fff;
  .avatar {
    width: 6rem;
    height: 6rem;
    margin-right: 0.8rem;
    border-radius: 50%;
    background-color: #fff;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    // background-color: aquamarine;
  }
}
.button-box {
  width: 100%;
  border-bottom: 1px solid rgba(153, 153, 153, 0.1);
  padding: 1rem 2.4rem;
  background-color: #fff;

  .icon {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.2rem;
    background-position: top;
    background-size: 100% 100%;
  }
  .data-icon {
    background-image: url('~assets/mine-date.png')
  }
  .participate-icon {
    background-image: url('~assets/mine-participate.png')
  }
  .score-icon {
    background-image: url('~assets/mine-score.png')
  }
}
</style>
<template>
  <div class="w-100">
    <div class="info d-flex-row d-flex-center">
      <div class="avatar">
        <img :src="user.avatar" />
      </div>
      <div>
        <p style="margin-bottom: 1.2rem;">
          <span style="font-size: 1.5rem; margin-right: 1rem;">{{user.member.name}}</span>
          <span style="font-size: 1rem;">{{user.position}}</span>
        </p>
        <div class="d-flex-row align-items-center">
          <div style="margin-right: 0.8rem;" class="d-i-flex-row align-items-center">
            <!-- <i class="icon"></i> -->
            <svg fill="#ffffff" t="1576540800085" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2006" width="24" height="24"><path d="M821.6 380.1H673.2V233.2c0-56.7-46.1-102.7-102.7-102.7h-355c-56.7 0-102.7 46.1-102.7 102.7v683.3h802.7V474c0-51.8-42.1-93.9-93.9-93.9zM319.8 855.8V731.9c0-5.8 4.8-10.6 10.6-10.6h125.1c5.8 0 10.6 4.8 10.6 10.6v123.9H319.8z m206.4 0.6V731.9c0-38.9-31.7-70.6-70.6-70.6H330.4c-38.9 0-70.6 31.7-70.6 70.6v124.5h-87.1V233.2c0-23.6 19.2-42.7 42.7-42.7h355c23.6 0 42.7 19.2 42.7 42.7v146.9h-0.1v476.4h-86.8z m329.3 0H673.2V440.1h148.4c18.7 0 34 15.2 34 34v382.3z" p-id="2007"></path><path d="M500.6 315.9H285.4c-16.6 0-30 13.4-30 30s13.4 30 30 30h215.1c16.6 0 30-13.4 30-30s-13.4-30-29.9-30z m0 163.4H285.4c-16.6 0-30 13.4-30 30s13.4 30 30 30h215.1c16.6 0 30-13.4 30-30 0.1-16.6-13.4-30-29.9-30z" p-id="2008"></path></svg>
            <span style="font-size: 1rem;">{{user.member.dept.name}}</span>
          </div>
          <div class="d-i-flex-row align-items-center">
            <svg t="1576540839577" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2786" width="24" height="24"><path d="M912 743.8c0 10.3-1.9 23.6-5.7 40-3.8 16.5-7.8 29.4-11.9 38.9-8 19-31.1 39-69.4 60.2-35.5 19.3-70.7 28.9-105.7 28.9-10.3 0-20.4-0.6-30.1-2.1-9.8-1.3-20.8-3.7-32.6-7.1-11.9-3.4-20.8-6.2-26.7-8.2-5.8-2.1-16.4-6.1-31.6-11.6-15.1-5.7-24.4-9.1-27.8-10.3-37.1-13.3-70.3-28.9-99.4-47.2-48.2-29.8-98.1-70.9-150-122.7-51.8-51.8-92.8-102-122.7-150-18.2-29.1-34-62.3-47.2-99.4-1.2-3.4-4.5-12.7-10.3-27.8s-9.6-25.7-11.6-31.6c-2.1-5.8-4.7-14.8-8.2-26.7-3.4-11.9-5.7-22.8-7.1-32.6s-2.1-19.9-2.1-30.1c0-34.9 9.7-70.1 28.9-105.7 21.2-38.2 41.2-61.4 60.2-69.4 9.5-4.1 22.4-8.1 38.9-11.9 16.5-3.8 29.8-5.7 40-5.7 5.2 0 9.4 0.6 11.9 1.6 6.9 2.3 16.8 16.7 30.1 43.2 4.1 7.2 9.8 17.4 17.1 30.8 7.2 13.3 13.9 25.3 19.9 36.1 6.2 10.8 11.9 20.9 17.5 30.4 1.2 1.5 4.4 6.3 10 14.2 5.5 8 9.6 14.7 12.1 20.3 2.6 5.5 3.9 10.9 3.9 16.3 0 7.6-5.4 17.1-16.3 28.4-10.8 11.3-22.6 21.8-35.3 31.4-12.7 9.5-24.4 19.5-35.3 30.1-10.8 10.6-16.3 19.3-16.3 26.1 0 3.4 0.9 7.7 2.9 12.8 1.9 5.1 3.4 9 4.7 11.6 1.3 2.6 3.9 7.2 8 13.6 3.9 6.5 6.2 10.1 6.6 10.8 28.7 51.9 61.7 96.4 98.8 133.5 37.1 37.1 81.6 70.1 133.5 98.8 0.7 0.3 4.2 2.5 10.8 6.6 6.5 3.9 11 6.6 13.6 8 2.6 1.3 6.6 3 11.6 4.7 5.1 1.9 9.4 2.9 12.8 2.9 6.9 0 15.5-5.4 26.1-16.3 10.6-10.8 20.7-22.6 30.1-35.3 9.5-12.7 19.9-24.4 31.4-35.3 11.5-10.9 20.8-16.3 28.4-16.3 5.2 0 10.8 1.3 16.3 3.9s12.1 6.7 20.3 12.1c8 5.5 12.7 8.8 14.2 10 9.5 5.7 19.7 11.6 30.4 17.5 10.8 6.2 22.8 12.7 36.1 19.9 13.3 7.2 23.6 12.9 30.8 17.1 26.5 13.3 40.9 23.3 43.2 30.1 1.6 3.2 2.2 7.3 2.2 12.5z" p-id="2787" fill="#ffffff"></path></svg>
            <span style="font-size: 1rem;">{{user.mobile}}</span>
          </div>
        </div>
      </div>
    </div>
    <div @click="goEdit" class="button-box d-flex-row align-items-center justify-content-between">
      <div class="d-i-flex-row align-items-center">
        <i class="data-icon icon"></i>
        我的资料
      </div>
      <svg t="1576516023455" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="43192" width="16" height="16"><path fill="#999" d="M320 160c0 8.2 3.1 16.4 9.4 22.6L658.7 512 329.4 841.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l352-352c12.5-12.5 12.5-32.8 0-45.3l-352-352c-12.5-12.5-32.8-12.5-45.3 0-6.3 6.2-9.4 14.4-9.4 22.6z" p-id="43193"></path></svg>
    </div>
    <div @click="goScore" class="button-box d-flex-row align-items-center justify-content-between">
      <div class="d-i-flex-row align-items-center">
        <i class="participate-icon icon"></i>
        我的参与
      </div>
      <svg t="1576516023455" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="43192" width="16" height="16"><path fill="#999" d="M320 160c0 8.2 3.1 16.4 9.4 22.6L658.7 512 329.4 841.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l352-352c12.5-12.5 12.5-32.8 0-45.3l-352-352c-12.5-12.5-32.8-12.5-45.3 0-6.3 6.2-9.4 14.4-9.4 22.6z" p-id="43193"></path></svg>
    </div>
    <div class="button-box d-flex-row align-items-center justify-content-between">
      <div class="d-i-flex-row align-items-center">
        <i class="score-icon icon"></i>
        打分说明
      </div>
      <svg t="1576516023455" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="43192" width="16" height="16"><path fill="#999" d="M320 160c0 8.2 3.1 16.4 9.4 22.6L658.7 512 329.4 841.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l352-352c12.5-12.5 12.5-32.8 0-45.3l-352-352c-12.5-12.5-32.8-12.5-45.3 0-6.3 6.2-9.4 14.4-9.4 22.6z" p-id="43193"></path></svg>
    </div>
    <div class="button-box d-flex-row align-items-center justify-content-center">
      <div @click="exit" class="d-i-flex-row align-items-center">
        <!-- <i class="score-icon icon"></i> -->
        退出登录
      </div>
      <!-- <svg t="1576516023455" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="43192" width="16" height="16"><path fill="#999" d="M320 160c0 8.2 3.1 16.4 9.4 22.6L658.7 512 329.4 841.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l352-352c12.5-12.5 12.5-32.8 0-45.3l-352-352c-12.5-12.5-32.8-12.5-45.3 0-6.3 6.2-9.4 14.4-9.4 22.6z" p-id="43193"></path></svg> -->
    </div>
  </div>
</template>
<script>
/**
 * 个人中心
 */
export default {
  name: "mine",
  data() {
    return {
      user: {}
    }
  },
  created() {
    this.getMine()
  },
  methods: {
    getMine(){
      this.API.getMemberInfo()
        .then((result) => {
          console.log(result)
          if (result.code > 0) {
            Object.keys(result.data).forEach((key)=>{
              // this.user[key] = result.data[key]
              this.$set(this.user, key, result.data[key])
            })
          } else {
            this.$NotificAtion(result.msg)
            console.error(result)
          }
          
        }).catch((err) => {
          console.log(err)
        });
    },
    goEdit(){
      this.$router.push({ name: "mine-editeUser" });
    },
    goScore(){
      this.$router.push({ name: "score" });
    },
    exit() {
      this.$store.commit('clearLogin')
      this.$router.push({ name: "login" });
    }
  }
};
</script>